<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #my-map {
        width: 100%;
        height: 100%;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="my-map"></div>
    <script>
      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NDYzMzkyYy0xZDIzLTQyYWItOTE4OC0xMWEyNDE5MzY0MjMiLCJpZCI6MTY1MjA0LCJpYXQiOjE2OTQxMzc5NDF9.HJPrgaIb6MfQPj4WXmR_coS8SEloNJH5LIGgXDOWX6Y'
      const viewer = new Cesium.Viewer('my-map', {
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: true, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: true, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: true,
        navigationHelpButton: false, // 是否显示帮助信息控件
        shadows: true
      })

      var modelMatrix = Cesium.Matrix4.fromRotationTranslation(
        Cesium.Matrix3.IDENTITY,
        Cesium.Cartesian3.ZERO
      )
      modelMatrix = Cesium.Matrix4.multiplyByMatrix3(
        modelMatrix,
        Cesium.Matrix3.fromScale(new Cesium.Cartesian3(-1, 1, 1))
      )

      var entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0.0),
        orientation: Cesium.Transforms.eastNorthUpToFixedFrame(
          Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0.0)
        ),
        model: {
          uri: './scene.gltf',
          minimumPixelSize: 128,
          maximumScale: 20000,
          silhouetteColor: Cesium.Color.BLACK,
          silhouetteSize: 0.5,
          clippingPlanes: new Cesium.ClippingPlaneCollection({
            planes: [
              new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0),
              new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Y, 0.0),
              new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Z, 0.0)
            ]
          }),
          modelMatrix: modelMatrix
        }
      })
    </script>
  </body>
</html>
